<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item
        :label="$t('configure.configure_type')"
        prop="configure_type"
      >
        <el-select v-model="form.configType" size="small" class="size">
          <el-option
            v-for="item in Object.keys(info)"
            :key="item"
            :value="item"
            :label="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('name')" prop="name">
        <el-input
          v-model="form.name"
          :disabled="disableName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('configure.configure_value')" prop="baseline">
        <el-input v-model="form.baseline" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('configure.normalLibrary')"
        prop="standardId"
        v-if="d_normal && !row_id"
      >
        <el-select v-model="form.standardId" size="small" class="size">
          <el-option
            v-for="item in normals"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('attribute')" prop="attribute">
        <el-select v-model="form.attribute" size="small" class="size">
          <el-option
            v-for="item in Object.keys(
              form.configType && info[form.configType]
                ? info[form.configType]
                : {}
            )"
            :key="item"
            :value="item"
            :label="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('configure.restart_sign')" prop="flag">
        <el-radio v-model="form.flag" label="true">是</el-radio>
        <el-radio v-model="form.flag" label="false">否</el-radio>
      </el-form-item>
      <el-form-item :label="$t('configure.file_path')" prop="filePath">
        <el-input
          v-model="form.filePath"
          autocomplete="off"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('description')" prop="description">
        <el-input v-model="form.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("save")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  getClassInfo,
  getStandardLib,
  createConfigureItem,
  updateConfigureItem,
  getOneConfigure,
} from "@/api/config";
import { getMigrateClassInfo } from "@/api/migrate_diff";
import { createMigrateConfigure } from "@/api/migrate_diff";
import { successOrError } from "@/utils";
export default {
  props: {
    disableName: {
      type: Boolean,
      default: false,
    },
    row_id: {
      type: String | Number,
      default: null,
    },
    libId: {
      type: String | Number,
      default: "",
    },
    d_normal: {
      type: Boolean,
      default: false,
    },
    osArch: {
      type: String,
      default: "",
    },
    osVersion: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      normals: [],
      info: {},
      update: false,
      form: {
        configType: "",
        name: "",
        baseline: "",
        description: "",
        attribute: "",
        flag: "",
        filePath: "",
        standardId: this.$route.params.id || "",
      },
      rules: {
        configType: [
          {
            required: true,
            message: this.$t("configure.configure_type_require"),
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("configure.configure_name_require"),
            trigger: "change",
          },
        ],
        baseline: [
          {
            required: true,
            message: this.$t("configure.configure_value_require"),
            trigger: "change",
          },
        ],
        attribute: [
          {
            required: true,
            message: this.$t("configure.configure_attribute_require"),
            trigger: "change",
          },
        ],
        filePath: [
          {
            required: true,
            message: this.$t("configure.configure_file_require"),
            trigger: "change",
          },
        ],
        standardId: [
          {
            required: true,
            message: this.$t("configure.normal_require"),
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    "form.configType": function (newValue) {
      if (newValue && !this.update) {
        this.form.attribute = Object.keys(this.info[this.form.configType])[0];
        this.form.filePath =
          this.info[this.form.configType][this.form.attribute];
      }
    },
    "form.attribute": function (newValue) {
      if (newValue && !this.update) {
        if (this.info[this.form.configType]) {
          this.form.filePath = this.info[this.form.configType][newValue];
        }
      }
    },
  },
  mounted() {
    const info = {};
    if (this.libId) {
      getMigrateClassInfo().then((res) => {
        this.info = res.data.data;
        this.update = false;
      });
    } else {
      getClassInfo().then((res) => {
        Object.keys(res.data.data).map((key) => {
          info[key] = Object.assign(...res.data.data[key]);
          this.info = info;
          this.update = false;
        });
      });
    }
    if (this.d_normal && !this.row_id) {
      getStandardLib({ paged: false }).then((res) => {
        res.data.data.results.map((item) => {
          this.normals.push({
            id: item.id,
            name: `${item.name}_${item.version}_${item.cpuArch}`,
          });
        });
      });
    }
    if (this.row_id) {
      this.update = true;
      getOneConfigure({ id: this.row_id }).then((res) => {
        let data = res.data.data;
        this.form.name = data.name;
        this.form.baseline = data.baseline;
        this.form.configType = data.configType;
        this.form.description = data.description;
        this.form.attribute = data.attribute;
        this.form.flag = data.flag;
        this.form.filePath = data.filePath;
      });
    }
  },
  methods: {
    handleCancel() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.libId) {
            let data = {
              osArch: this.osArch,
              osVersion: this.osVersion,
              libId: this.libId,
              name: this.form.name,
              value: this.form.baseline,
              configType: this.form.configType,
              attribute: this.form.attribute,
              description: this.form.description,
            };
            createMigrateConfigure(data).then((res) => {
              successOrError.call(this, res);
            });
          } else {
            if (!this.row_id) {
              createConfigureItem(this.form).then((res) => {
                successOrError.call(this, res);
              });
            } else {
              updateConfigureItem({ ...this.form, id: this.row_id }).then(
                (res) => {
                  successOrError.call(this, res);
                }
              );
            }
          }
        }
      });
    },
  },
};
</script>